import {React,Fragment,useState,useEffect,useRef} from 'react';
import {Table,Button,Space,Input,Modal,Radio,message} from 'antd';
import {EditOutlined,DeleteOutlined} from '@ant-design/icons';
import {inject,observer} from 'mobx-react';
import './css/CustomerInfo.css';

// 成功提示框
const success = (value) => {
  message.success(value);
};
// 失败提示
const error = (value) => {
  message.error(value);
};
//列名 
const mapFieldToChinese = {
  id:'序号',
  memberType:'会员类型',
  upgradeQuota:'升级额度(积分)',
  isIntegral:'是否积分'
}
// 复选
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: (record) => ({
    disabled: record.name === 'Disabled User',
    // Column configuration not to be checked
    name: record.name,
  }),
};


function VipCardManage(props) {
    // 添加修改框状态
    const [add, setAdd] = useState(false);
    // 删除提示模态框
    const [del, setDel] = useState(false);
    const [addEdit,setAddEdit] = useState();
    const [id,setId] = useState()//获取序号
    const memberTypeRef = useRef()//会员名称
    const upIntegralRef = useRef();//升级积分
    const [isIntegral, setIsIntegral] = useState(0);//是否积分
    const isIntegralChange = e => {
      setIsIntegral(e.target.value);
    };
    // 清除
    function clear() {
      memberTypeRef.current.state.value='';
      upIntegralRef.current.state.value='';
      setIsIntegral(0)
    }
      // 添加修改
      function addEditInfo(fun){
        let values = {
          fun:fun,
          id:id,
          memberType:memberTypeRef.current.state.value,
          isIntegral:isIntegral,
          upIntegral:upIntegralRef.current.state.value
        }
        props.CustomerManagement.addEditCustomerInfo(values).then((res)=>{
          if(res.code==200){
            success(res.msg)
          }else{
            error(res.msg)
          }
          getList()
        }).catch((err)=>{
          console.log(err);
        })
        clear()
      }
      // 删除
      function delInfo(){
        let values = {
          id:id
        }
        props.CustomerManagement.delMemberCard(values).then((res)=>{
          console.log(res);
          if(res.code==200){
            success(res.msg)
          }
          getList()
        }).catch((err)=>{
          console.log(err);
          error(err.msg)
        })
        
      } 
  // 渲染table
      const [selectionType, setSelectionType] = useState('checkbox');
      const [columns,setColumns] = useState([]);
      const [data,setData] = useState([]);
      const [loading,setLoading] = useState(false)
      function getList() {
        props.CustomerManagement.getMemberCardList().then((res)=>{
          let keys = Object.keys(res.data[0]);
          let cols = keys.map(item=>{
              if(item == 'isIntegral'){
                return {
                    width: 170,
                    title: mapFieldToChinese[item],
                    dataIndex: item,
                    key: item,
                    align: 'center',
                    render: (val)=>{
                        if(val === 0){
                            return (
                                <span>是</span>
                            )
                        }else{
                            return (
                                <span>否</span>
                            )
                        }
                    }
                }
              }
              else{
                return {
                    width: 170,
                    title: mapFieldToChinese[item],
                    dataIndex: item,
                    key: item,
                    align: 'center'
                  }
              }
          })
          cols.push({
            width:150,
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            align: 'center',
            fixed: 'right',
            render: ()=>{
                return(
                  <Space>
                  <Button shape="circle" type='primary' icon={<EditOutlined />} onClick={()=>{ setAdd(true);setAddEdit(1) }}></Button>
                  <Button shape="circle" icon={<DeleteOutlined />} type='danger' onClick={()=>{setDel(true)}}></Button>
                </Space>
                )
            }
          })
          setColumns(cols)
          setData(res.data)
        }).catch((err)=>{
          console.log(err);
        }).finally(()=> {setLoading(false);})
      }
      useEffect(()=>{
        setLoading(true)
        getList()
      },[]);
    return (
        <Fragment>
            <Table 
            loading={loading}
            rowSelection={{
            type: selectionType,
                ...rowSelection,
            }} bordered='true' 
            title={() => {return (<Fragment>
              <h4>会员卡管理</h4>
              <div className='vipCardTableHeader'>
                <Button type='primary' onClick={()=>{ setAdd(true);setAddEdit(0) }}>新增会员卡</Button>
              </div>
              </Fragment>)}} 
            onRow = {(record) => {
              return {
                onClick: () => {
                  setId(record.id)
                  }
                }
              }
            }
            columns={columns} dataSource={data} rowKey={(record) => `id${record.id}`} pagination={{ pageSize: 10 }} scroll={{ y: 400 }}></Table>
            <Modal
              title="会员卡管理"
              centered
              visible={add}
              okText= '确定'
              cancelText= '取消'
              onOk={() => {
                setAdd(false);
                addEditInfo(addEdit)
              }}
              onCancel={() => setAdd(false)}
              width={400}
            >
              <div className='addCard'>
                <div>
                  会员卡名称：<Input ref={memberTypeRef} placeholder='请输入' style={{ width: 170}} />
                </div>
                <div>
                  升级额度(积分)：<Input ref={upIntegralRef} placeholder='请输入' style={{ width: 170}}/>
                </div>
                <div>
                  是否积分：<Radio.Group onChange={isIntegralChange} value={isIntegral}>
                          <Radio value={0}>是</Radio>
                          <Radio value={1}>否</Radio>
                        </Radio.Group>
                </div>
              </div>
            </Modal>
            {/* 删除提示 */}
            <Modal title="删除提示" 
            visible={del}
            okText= '确定'
            cancelText= '取消'
            onOk={() => {
              delInfo()
              setDel(false)
            }}
            onCancel={() => {setDel(false)}}
            >
              <p>你确定要删除这条信息吗</p>
            </Modal>
        </Fragment>
    );
}

export default inject('CustomerManagement')(observer(VipCardManage))
// export default VipCardManage;